import React, { Component } from 'react';
import cx from 'classnames';
import _ from 'underscore';

import dispatcher from 'lib/dispatcher';
import Modal from 'lib/components/Modal.jsx';

import SettingView from './SettingView.jsx';
import EventScope from './EventScope.es6';

class Input extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      value: props.value
    };
  }

  valueChanged(e) {
    let value = e.target.value.trim();
    this.setState({ value }, () => this.props.onChange(this.props.propertyName, value));
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ value: nextProps.value });
  }

  render() {
    return (
      <input
        id={ this.props.id }
        type="text"
        className="input-text"
        onChange={ this.valueChanged.bind(this) }
        value={ this.state.value } />
    );
  } // render
}

Input.defaultProps = {
  id: null,
  value: null,
  onChange: (propertyName, value) => {}
}

export default class EventEditor extends Modal {
  propertyChanged(propertyName, value) {
    let newState = {};
    newState[propertyName] = value;

    dispatcher.dispatch({
      $type: 'property_changed',
      name: propertyName,
      data: newState
    });
  } // propertyChanged

  addEvent() {
    dispatcher.dispatch({
      $type: 'add_event'
    });
  } // addEvent

  removeHandleer() {
    dispatcher.dispatch({
      $type: 'remove_self'
    });
  } // removeHandleer

  saveHandler() {
    dispatcher.dispatch({
      $type: 'save_virtual'
    });
  } // saveHandler

  renderHeader() {
    return (
      <h4>编辑事件属性</h4>
    );
  }

  renderBody() {
    return (
      <div className="clearfix" style={{margin: '-15px -15px 0px -15px', width: '768px'}}>
        <div className="widget-float form-group horizontal">
          <ul>
            <li>
              <label htmlFor="event_name" className="control-label">虚拟事件名</label>
              {
                this.state.isNew
                  ? (
                    <div>
                      <Input
                      id="event_name"
                      propertyName="name"
                      onChange={ this.propertyChanged.bind(this) }
                      value={ this.state.currentEvent.name } />
                      {
                        _.has(this.state.errors, 'name') ? (
                          <span className="msg-error">{ this.state.errors.name }</span>
                        ) : null
                      }
                    </div>
                  ) : (
                    <span>{ this.state.currentEvent.name }</span>
                  )
              }
            </li>
            <li>
              <label htmlFor="event_cname" className="control-label">虚拟事件显示名</label>
              <Input
                id="event_cname"
                propertyName="cname"
                onChange={ this.propertyChanged.bind(this) }
                value={ this.state.currentEvent.cname } />
              {
                _.has(this.state.errors, 'cname') ? (
                  <span className="msg-error">{ this.state.errors.cname }</span>
                ) : null
              }
            </li>
          </ul>
        </div>

        <div className="page-title">
          <div className="custom-title">虚拟事件的组成</div>
          <p className="quote">当以下事件中任意一个被触发时，视作该虚拟事件被触发</p>
        </div>

        <div className="editor-container">
        {
          this.state.currentEvent.details.map((item, index) =>
            <SettingView
              predefinedEvents={ this.state.predefinedEvents }
              onNeedResize={() => this.scope.emit() }
              index={ index }
              isNew={ this.state.isNew }
              key={ index }
              item={ item } />
          , this)
        }
        </div>

        <div className="text-align-center">
          <a href="javascript:;" className="btn-green" onClick={ this.addEvent }>+ 添加事件</a>
        </div>
      </div>
    );
  }

  renderFooter() {
    return (
      <div className="clearfix">
      {
        this.state.isNew ? null : (
          this.state.inProcessing
            ? <span className="float-left text-gray cursor-disabled">&times; 删除虚拟事件</span>
            : <a href="javascript:;" className="float-left text-red" onClick={ this.removeHandleer }>&times; 删除虚拟事件</a>
        )
      }
        <div className="float-right">
          <a href="#" style={{marginRight: 20}} onClick={ this.close }>取消</a>
          <button className={ cx({
            'btn-green': !this.state.inProcessing,
            'btn-disabled': this.state.inProcessing
          })} onClick={ this.saveHandler }>保存</button>
        </div>
      </div>
    );
  }
}

EventEditor.defaultProps = {
  Scope: EventScope,
  className: 'virtual-event-editor'
}
